<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>psd转静态页面练习</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <!-- 头部区域开始 -->
  <header>
    <a href="javascript:;">
      <img src="./切片图片/list.jpg" alt="主列表">
    </a>
    <a href="javascript:;">
      <img src="./切片图片/list_1.jpg" alt="">
    </a>
  </header>
  <!-- 头部区域结束 -->

  <!-- nav区域开始 -->
  <nav>
    <ul>
      <li>
        <a href="#">ALL</a>
      </li>
      <li>
        <a href="#">PEOPLE</a>
      </li>
      <li>
        <a href="#">TOPICS</a>
      </li>
      <li>
        <a href="#">GROUPS</a>
      </li>
    </ul>
  </nav>
  <!-- nav区域结束-->

  <!-- main内容主题区域开始 -->
  <div class="main">
    <div class="main-header">
      <div class="main-h-l">
        <div class="circle"></div>
        <span>Bill S Kenney</span>
      </div>
      <div class="main-h-r">
        <span>Follows you</span>
        <img src="./切片图片/button.jpg" alt="follow">
      </div>
    </div>
    <div class="main-body">
      <div class="main-b-item">
        <h1>Of The Past</h1>
        <p>28 Photos | Upadated 21 lan 2015</p>
        <div class="button">Subscribe</div>
      </div>
      <div class="main-b-item">
        <h1>Workspaces</h1>
        <p>28 Photos | Upadated 21 lan 2015</p>
        <div class="button">Subscribe</div>
      </div>
      <div class="main-b-item">
        <h1>Of The Past</h1>
        <p>28 Photos | Upadated 21 lan 2015</p>
        <div class="button">Subscribe</div>
      </div>
      <div class="main-b-item">
        <h1>Of The Past</h1>
        <p>28 Photos | Upadated 21 lan 2015</p>
        <div class="button">Subscribe</div>
      </div>
    </div>
  </div>
  <!-- main内容主题区域结束 -->

  <!-- tabbar区域开始 -->
  <footer>
    <ul>
      <li>
        <a href="" javascript="">
          <img src="./切片图片/tabbar_1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="" javascript="">
          <img src="./切片图片/tabbar_2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="" javascript="">
          <img src="./切片图片/tabbar_3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="" javascript="">
          <img src="./切片图片/tabbar_4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="" javascript="">
          <img src="./切片图片/tabbar_5.jpg" alt="">
        </a>
      </li>
    </ul>
  </footer>
  <!-- tabbar区域结束 -->

</body>

</html>